<template>
  <el-dialog :visible.sync="visible" :title="title" :close-on-click-modal="false" :modal-append-to-body="false" :append-to-body="true"
      class="JNPF-dialog JNPF-dialog_center form-dialog-body" lock-scroll :width="width" @close="closeDialog" @open="onOpen">

      <div class="form-script-dialog-body">
     
      <div  v-if="actionType==='1'" style="margin-bottom:20px">
        <h3 style="margin-bottom:20px">推进类型</h3>
        <el-radio-group v-model="skipStep">
          <el-radio :label='0'>完成本阶段</el-radio>
          <el-radio :label='1' v-if="config.allowSkip">跳转阶段</el-radio>
        </el-radio-group>
      </div>
      <div  v-if="skipStep===1" style="margin-bottom:10px">
        <h3 style="margin-bottom:20px">选择跳转步骤</h3>
        <el-select v-model="form.currStep" placeholder="请选择">
        <el-option
           v-for="(item, i) in skipSteps"
          :key="item.name+'_'+i"
          :label="item.title"
          :value="i+skipLen">
        </el-option>
      </el-select>
      </div>
      <div>
        <h3 style="margin-bottom:10px">处理意见</h3>
       <el-input type="textarea" :rows="2" v-model="form.text"></el-input>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="onOk()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { deepClone } from '@/utils'
import { CreateStageLog,ListStageLog } from '@/api/workFlow/FlowStage'
export default {
  components: { },
  props: {
    config: {
      type: Object,
      default: () => { }
    },
    value: {
      type: Object,
      default: () => { 
        id:'';
        stage:'0';
        state:1 //1未开始;2进行中;3暂停;4终止;5完成
      }
    },
    actionType:{
      default:"1"
    }
  },
  watch: {
    visible(val) {
      if (val) return
      this.closeDialog()
    },
    'form.currStep'(val){
      this.step = val
      // this.onDone()
    },
    skipStep(val){
      if(val){

      }
    }
  },
  
  data() {
    return {
      currModelId:this.$store.state.generator.dynamicModelExtra.modelId,
      businessId:this.$store.state.generator.dynamicModelExtra.id,
      visible:true,
      width:'800px',
      step:parseInt(this.value.stage),
      skipStep:0,
      skipLen:0,
      state:parseInt(this.value.state),
      form:{
        text:'',
        prevStep:this.value.stage,
        currStep:''
      }
    }
  },
  computed: {
    valueJson(){
      return JSON.parse(this.config.defaultValue)
    },
    skipSteps(){
      debugger
      let list1 = deepClone(this.config.children)
      let val = parseInt(this.value.stage)
      this.skipLen = val
      let list = list1.slice(val, list1.length);
      return list
    },
    title() {
      let s = this.actionType
        switch(s){
          case '1':
            return this.skipStep?'跳转阶段':'完成本阶段'
          case '2':
            return '终止'
          case '3':
            return '重启'
          case '4':
            return '日志'
        }
        return s
    },
    computState() {
      let s = this.actionType
      let len = this.config.children.length
      switch(s){
        case '1':
          return this.step>=len?5:2
        case '2':
        return 4
        case '3':
          return 1
      }
      return 1
    }
  },
  created() {
    // debugger
  },
  methods: {
    onOpen(){
      this.visible = true
    },
    closeDialog(){
      this.$emit('close', true)
    },
    onOk(){
      let val = this.step
      let atype = this.actionType
      if(atype==='3'){ // restart
        val = 0
      }else if(atype==='2'){ // stop
        val = this.step
      }else{
        let len = this.config.children.length
        if(!this.skipStep&&val<len){
          val++
        }
      }
      this.step = val
     this.onDone()
    },
    onDone(){
      debugger
      let id = this.step===0?'':this.config.children[this.step-1].id
      let nextName = this.step===0?'未开始':this.config.children[this.step-1].title
      let prevName = this.form.prevStep==='0'?'未开始':this.config.children[parseInt(this.form.prevStep)-1].title
      this.form.currStep = this.step+''
      let text = this.form.text
      let state = this.computState
      let val = {
        id,
        nextName,
        prevName,
        stage:this.step+'',
        state
      }
       this.submitLog(val)
    },
    submitLog(val){
      
      let flowStageLogModel = {
        modelId:this.currModelId,
        businessId:this.businessId,
        prevId:this.form.prevStep,
        nextId:this.step+'',
        prevName:val.prevName,
        nextName:val.nextName,
        operatorType:this.title,
        status:val.state,
        comment:this.form.text
      }
      CreateStageLog(flowStageLogModel).then((res)=>{
        this.$emit('change', val)
      })
    }
    }
    
}
</script>
<style lang="scss" scoped>
 .form-dialog-body {
     height: 500px;
     display: flex;
     overflow: hidden;
 }
 .form-dialog-selector{
  display: flex;
  margin-bottom:10px;
 }
</style>